<!DOCTYPE html>
<html lang="zh">
<head>
<th:block th:include="include :: header('局部刷新')" />
</head>
<body class="gray-bg">
	<div class="wrapper wrapper-content animated fadeInRight">
		<div class="ibox">
			<div class="ibox-content">
				<h3>文档提交</h3>
				<p class="small">
					<i class="fa fa-hand-o-up"></i>
					点击上传按钮上传新数据到列表中覆盖旧文档
				</p>

				<div class="input-group">
					<input id="file" type="file" class="input input-sm form-control">
					<span class="input-group-btn">
						<button class="btn btn-sm btn-white" onclick="upload()">确定</button>
					</span>
				</div>
				<div id="tasklist">
					<ul class="sortable-list connectList agile-list">
						<li th:if="${tasks != null}" th:each="item : ${tasks}" class="warning-element">
							[[${item.name}]]
							<div class="agile-detail">
								<a th:href="${item.url}" class="pull-right btn btn-xs btn-white">下载</a>
								<i class="fa fa-clock-o"></i>
								[[${item.date}]]
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<th:block th:include="include :: footer" />
	<script>
		var prefix= ctx+"practice/report"

		function upload(){
			const input = document.getElementById('file');
			const file = input.files[0];
			if(file===undefined){$.modal.alertWarning("请先选择文件")};
			let newFile = new Blob([file], { type: file.type });
			let newFileWithName = new File([newFile], randomString(6)+'.doc', { type: file.type });
			const formData = new FormData();
			formData.append('file', newFileWithName);
			formData.append('fileName', file.name)

			const xhr = new XMLHttpRequest();
			xhr.open('POST', prefix+'/upload', true);
			xhr.onload = function () {
				console.log(xhr.responseText);
				location.reload();
			};
			xhr.send(formData);
		}

		function randomString(length) {
			let result = '';
			const characters = 'abcdefghijklmnopqrstuvwxyz0123456789';
			const charactersLength = characters.length;
			for (let i = 0; i < length; i++) {
				result += characters.charAt(Math.floor(Math.random() * charactersLength));
			}
			return result;
		}
	</script>
</body>
</html>
